<template>
  <div class="file-manager-container">
    <div class="page-header">
      <h1 class="page-title">文件管理</h1>
      <div class="header-actions">
        <el-button type="primary" @click="showUploader = !showUploader">
          <el-icon><Upload /></el-icon>
          <span>{{ showUploader ? '隐藏上传' : '上传文件' }}</span>
        </el-button>
      </div>
    </div>

    <el-collapse-transition>
      <el-card v-show="showUploader" class="uploader-card">
        <template #header>
          <div>文件上传</div>
        </template>
        <FileUploader @upload-success="handleUploadSuccess" />
      </el-card>
    </el-collapse-transition>

    <el-card class="file-list-card">
      <template #header>
        <div>文件列表</div>
      </template>
      <FileList ref="fileListRef" />
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import FileUploader from '../components/file-management/FileUploader.vue';
import FileList from '../components/file-management/FileList.vue';
import { Upload } from '@element-plus/icons-vue';

const showUploader = ref(true);
const fileListRef = ref(null);

const handleUploadSuccess = (files) => {
  // 调用FileList组件的方法刷新列表
  if (fileListRef.value) {
    // 如果有上传成功的文件，则将它们添加到文件列表中
    if (files && files.length > 0) {
      files.forEach(file => {
        fileListRef.value.addFile(file);
      });
    } else {
      // 否则只是重新获取文件列表
      fileListRef.value.fetchFiles();
    }
  }
};
</script>

<style scoped>
.file-manager-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
}

.uploader-card {
  margin-bottom: 20px;
}

.file-list-card {
  margin-top: 20px;
}
</style>